<template>
	<view>
		<!-- 超市管理系统商品中心 -->
		<view class="topinput">
			<input type="text" placeholder="搜索" v-model="filterText">
			<select v-model="selectdata">
				<option value=''>商品名称</option>
				<option>商品编号</option>
				<option>供应商编号</option>
			</select>
		</view>
		<view class="box" v-for="(item,index) in filterList" :key="index" @click="topage(index)">
			<view class="boxcent">
				<view class="topcent">
					<view>
						<text class="text">商品名称:</text>
						<text class="text1">{{item.name}}</text>
					</view>
					<view class="head">
						<text class="text">供应商编号:</text>
						<text class="text1">{{item.supplier_id}}</text>
					</view>
				</view>
				<view class="headcent">
					<view class="tophead">
						<text class="text">商品编号:</text>
						<text class="text1">{{item.id}}</text>
					</view>
					<view class="head">
						<text class="text">仓库编号:</text>
						<text class="text1">{{item.wid}}</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<drag-button name="新增" :isDock="true" :existTabBar="true" @btnClick="btnClick" />
		</view>
		<view>
			<u-tabbar v-model="current" :active-color="activeColor" :list="tabBerList" ></u-tabbar>
		</view>
	</view>
</template>

<script>
	import dragButton from '../../../components/drag-button.vue';
	import {mapState} from 'vuex'
	export default {
		components: {
			dragButton
		},
		data() {
			return {
				activeColor: '#17abe3',list:[],
				current:1,selectdata:'',filterText:''
			}
		},
		computed: {
			filterList() {
				let selectdata = this.selectdata;
				var arr = []
				this.list.forEach((item) => arr.push(item))	
				if (this.filterText) {
					if(selectdata==''){
						arr = this.list.filter(item => item.name.includes(this.filterText))
					}else if(selectdata=='商品编号'){
						arr = this.list.filter(item => item.id.includes(this.filterText))
					}else if(selectdata=='供应商编号'){
						arr = this.list.filter(item => item.supplier_id.includes(this.filterText))
					}
				}
				return arr
			},
			...mapState(['tabBerList'])
		},
		onLoad: function () { //option为object类型，会序列化上个页面传递的参数
		    uni.getStorageSync('account')
			this.$store.commit('setRoleId',0)
			this.getdata();
		},
		methods: {
			async getdata(){
				const res = await this.Request({
					url:'api/stock/gealltdata'
				})
				this.list = res.data
			},
			topage(e){
				uni.navigateTo({
					url:'/pages/public/stock/stoctment?id=' + this.list[e].id
				})
			},
			btnClick(){
				uni.navigateTo({
					url:'/pages/public/stock/stoctadd'
				})
			}
		}
	}
</script>

<style lang="scss">
	.topinput{
			display: flex;
			input{
				height: 30px;
				width: 200px;
				margin: 15px 0 15px 20px;
				border-radius: 10px;
				border: 2px solid #919191;
			}
			select{
				margin: 15px 0 15px 30px;
				border-radius: 10px;
			}
	}
	.boxcent{
		position: relative;
		width: 100%;
		background-color: #ffff7f;
		border: 1px solid  #ccc;
		border-radius: 10px;
		.text1{
			font-size: 14px;
			margin-left: 7px;
		}
		.topcent{
			display: flex;
			margin: 10px 0 0 40px;
			.text{
				font-size: 17px;
				font-weight: 700;
			}
			.head{
				position: absolute;
				margin-left: 162px;
				.text{
					font-size: 15px;
					font-weight: 500;
				}
			}
		}
		.headcent{
			margin: 15px 0 5px 40px;
			display: flex;
			.tophead{
				.text{
					font-size: 15px;
					// font-weight: 500;
				}
			}
			.head{
				margin-left: 27px;
				.text{
					font-size: 15px;
					// font-weight: 500;
				}
			}
		}
	}
	.box :active{
		background-color: #ffffff;
	}
</style>
